<template>
  <el-dialog
      v-model="diaVisible"
      title="删除用户"
      :close-on-click-modal="false"
      :append-to-body="true"
      class="del-user"
      width="520px"
  >
    <img class="img" src="@/assets/images/img-icon18.svg" width="44"/>
    <div class="txt">是否确认删除所选用户？</div>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="diaVisible = false" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {deleteByUserName, deleteListByUserName} from "../../../router/api.js";

export default {
  name: "delUser",
  data() {
    return {
      diaVisible: false,
      selectUser: []
    }
  },
  methods: {
    show(item) {
      this.diaVisible = true;
      this.selectUser = item;
    },
    submitForm() {
      let arr = [];
      this.selectUser.forEach(opt => {
        arr.push(opt.userName)
      })
      deleteListByUserName({usernames: arr}).then(res => {
        if (res.data.code == 200) {
          this.diaVisible = false;
          this.$emit('delHandle')
        } else {
          // this.$message.warning(res.data.msg)
        }
      })

    },
  }
}
</script>

<style scoped lang="scss">
.txt {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #336666;
  margin-top: 20px;
  margin-bottom: 30px;
}
.img{
  margin-top: 40px;
}
</style>
<style lang="scss">
.del-user{
  .el-dialog__body{
    text-align: center;
  }
}
</style>
